<template>
	<view>
		<view class="dd">
			<!-- 未登录页面顶部份 -->
			<view class="item1">
				<image class="tx" style="width: 130rpx;height: 130rpx;" src="../../../static/1.png" mode=""></image>
				<view class="item2">
					<view class="item3">hi~欢迎回来</view>
					<view class="item4"><text class="itemz">登录</text></view>
				</view>
			</view>
			
			<!-- 第二部分 -->
			<view class="er1">
				<view class="er2">关注3</view>
				<view class="er3">|</view>
				<view class="er4">话题0</view>
			</view>
		</view>
		
		 <!-- 第三部分-->
		 <view class="item-dj">
		 	<!-- 第三部分1 -->
			<view>
				<navigator url="../news/news.vue">
					<view class="item-left">
						<image class="menpiao" src="../../../static/shoucang.png" mode=""></image>
					</view>
					<view class="item-left">收藏</view>
				</navigator>
			</view>
			
			<!-- 第三部分2 -->
			<view>
				<navigator url="../news/news.vue">
					<view class="item-left">
						<image class="menpiao1" src="../../../static/lishi.png" mode=""></image>
					</view>
					<view class="item-left">历史</view>
				</navigator>
			</view>
			
			<!-- 第三部分-3 -->
			<navigator url="../news/news.vue">
				<view class="item-left">
					<image class="menpiao2" src="../../../static/shezhi.png" mode=""></image>
				</view>
				<view class="item-left">设置</view>
			</navigator>
		 </view>
		 
		 <view>
			 <image style="width: 100%; height: 90rpx;" src="../../../static/guanggao.png" mode=""></image>
		 </view>
		 
		 <!-- 第四部分-3-->
		 <view class="button">
		 	<image class="buttons" style="width: 100%; height: 300rpx9;" src="../../../static/zanwu.png" mode=""></image>
			<view class="button"><text class="hh">已有</text>358,893<text class="hh">人</text></view>
			<view class="button"><text class="hh">在这里发布身边的新鲜事</text></view>
			<view class="reg-right">我也要发布</view>
		 </view>
		 
		 <!-- 第五部分-->
		 <view class="button">
		 	<view class="buttonx">先去逛逛<image class="buttony" style="width: 35rpx; height: 35rpx;" src="../../../static/fangxiang.png">
			</image>
			</view>
		 </view>
		 
		 <!-- 第六部分-->
		 <view class="zh"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
   .dd {
	   padding-bottom: 0rpx;
	   background-image: url(../../../static/7.png);
	   background-position: center;
	   margin-top: -30rpx;
	   height: 280rpx;
   }
   .tx {
	   margin-top: 10rpx;
	   border-radius: 50%;
   }
   .item1 {
	   display: flex;
	   margin-top: 30rpx;
	   margin-left: 20rpx;
   }
   .item2 {
   	   
   	   margin-top: 15rpx;
   	   
   }
   .item3 {
	   margin-left: 20rpx;
	   color: #ffffff;
	   font-weight: bold;
	   margin-top: 10rpx;
   }
      .item4 {
	   border-radius: 20rpx;
	   color: #ffffff;
	   width: 150rpx;
	   height: 50rpx;
	   background-color: #dd524d;
	   margin-left: 20rpx;
	   margin-top: 10rpx;
   }
   .itemz {
	   color: #ffffff;
	   margin-left: 45rpx;
   }
   .er1 {
	   display: flex;
	   margin-top: 80rpx;
	   margin-left: 80rpx;
	   opacity: 0.5;
   }
   .er2 {
	   margin-left: 50rpx;
	   color: #ffffff;
   }
   .er3 {
	   margin-left: 140rpx;
	   color: #ffffff;
   }
   .er4 {
	   margin-left: 150rpx;
	   color: #ffffff;
   }
   .smart {
	   
   }
   .item-dj {
	   display: flex;
	   flex-direction: row;
	   -webkit-flwx:1;
	   flex: 1;
	   border-bottom: 1rpx solid #e6e6e6;
	   margin-top: -50rpx;
	   margin-bottom: 5rpx;
   }
   
   .item-left {
	   height: 10rpx;
	   line-height: 71rpx;
	   width: 50%;
	   text-align: center;
	   margin: 90rpx;
	   font-size: 20rpx;
	   padding-bottom: 1rpx;
	   margin-top: 20rpx;
   }
   .menpiao {
	   width: 45rpx;
	   height: 45rpx;
	   text-align: center;
	   margin-top: 70rpx;
   }
   .menpiao1 {
	   width: 45rpx;
	   height: 45rpx;
	   text-align: center;
	   margin-top: 70rpx;
   }
   .menpiao2 {
	   width: 40rpx;
	   height: 40rpx;
	   text-align: center;
	   margin-top: 70rpx;
   }
   .buttons {
	   margin-top: 0rpx;

   }
   .button {
	   text-align: center;
   }
   .reg-right {
	   border: 1rpx solid #dd524d;
	   width: 250rpx;
	   height: 65rpx;
	   text-align: center;
	   color: #dd524d;
	   border-radius: 40rpx;
	   margin-bottom: 20rpx;
	   line-height: 70rpx;
	   margin-top: 40rpx;
	   margin-left: 240rpx;
   }
   .buttonx {
	   color: #999999;
   }
   .hh {
	   color: #999999;
   }
   .zh {
	   height: 200rpx;
   }
</style>
